<template>
	<view>
		<view class="bg-content">
			<image class="bg-img" :src="coverUrl" mode=""></image>
			<view v-for="(item, index) in titleList" :key="index" class="title-box"
				:style="[generateStyleObject(item)]">
				<text :style="{'lineHeight':item.fontSize+'rpx','textAlign':item.isAlignCenter?'center':'left'}">{{item.title}}</text>
			</view>
		</view>
		<view class="all-box">
			<view class="all-top">
				<view class="left-scroll">
					<view @click="changeTitle(item,index)" :class="index===titlecur?'act':''" class="left-item"
						v-for="(item,index) in titleList" :key="index"> 标题{{index+1}}
						<image @click.stop="deltitle(item,index)" v-show="titleList.length>1" class="delicon"
							src="/static/icon/deltitle.png" mode=""></image>
					</view>
				</view>
				<view class="add-box" @click="addtitle()">
					<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" src="/static/icon/addTitle.png"
						mode=""></image> 标题
				</view>
			</view>
			<view class="opt-box zl-flex">
				<view class="zl-flex">
					<view @click="edit()" class="zl-flex-col zl-col-center zl-m-r-50">
						<image style="width: 50rpx;height: 50rpx;" src="/static/icon/fontedit.png" mode=""></image>
						<view class="zl-m-t-12 zl-color-white zl-font-26"> 编辑 </view>
					</view>
					<view @click="size()" class="zl-flex-col zl-col-center zl-m-r-50">
						<image style="width: 50rpx;height: 50rpx;" src="/static/icon/fontSize.png" mode=""></image>
						<view class="zl-m-t-12 zl-color-white zl-font-26"> 字号 </view>
					</view>
					<view @click="style()" class="zl-flex-col zl-col-center zl-m-r-50">
						<image style="width: 50rpx;height: 50rpx;" src="/static/icon/fontcolor.png" mode=""></image>
						<view class="zl-m-t-12 zl-color-white zl-font-26"> 样式 </view>
					</view>
					<view @click="location()" class="zl-flex-col zl-col-center zl-m-r-50">
						<image style="width: 50rpx;height: 50rpx;" src="/static/icon/fontlocation.png" mode=""></image>
						<view class="zl-m-t-12 zl-color-white zl-font-26"> 位置 </view>
					</view>
					<view @click="time()" class="zl-flex-col zl-col-center ">
						<image style="width: 50rpx;height: 50rpx;" src="/static/icon/fonttime.png" mode=""></image>
						<view class="zl-m-t-12 zl-color-white zl-font-26"> 时长 </view>
					</view>
				</view>
				<view @click="submit()" class="save-btn zl-m-l-60"> 保存 </view>
			</view>
		</view>
		<!-- 编辑标题弹框 -->
		<uni-popup background-color="#242424" ref="editpop" type="bottom" border-radius="20rpx 20rpx 0 0">
			<view class="pop-box">
				<view class="pop-top zl-flex zl-row-between">
					<view class="video_poo_title">标题{{titlecur+1}}文案</view>
					<image @click="$refs.editpop.close()" style="width: 30rpx;height: 30rpx;"
						src="/static/icon/popclose2.png" mode="widthFix">
					</image>
				</view>
				<view class="pop-content">
					<textarea v-model="editobj.title" maxlength="20" class="textarea2"
						placeholder-style="color:#666;fontSize:28rpx" placeholder="请输入您的标题文案"></textarea>
					<view class="surebtn" @click="sureEdit()"> 确定 </view>
				</view>
			</view>
		</uni-popup>
		<!-- 字号弹框 -->
		<uni-popup background-color="#242424" ref="Sizepop" type="bottom" border-radius="20rpx 20rpx 0 0">
			<view class="pop-box">
				<view class="pop-top zl-flex zl-row-between">
					<view class="video_poo_title">标题{{titlecur+1}}字号</view>
					<image @click="$refs.Sizepop.close()" style="width: 30rpx;height: 30rpx;"
						src="/static/icon/popclose2.png" mode="widthFix">
					</image>
				</view>
				<view class="pop-content">
					<view class="zl-flex zl-p-l-30 zl-p-r-30">
						<text class="zl-font-30 zl-color-white zl-m-r-40">字体大小</text>
						<uni-number-box :step="step" @change="sizechange" :value="editobj.fontSize" background="#393A3C"
							color="#fff" />
					</view>
					<view class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-30">
						<text class="zl-font-30 zl-color-white ">字体选择</text>
					</view>
					<view class="zl-flex zl-p-l-30 zl-p-r-30 ">
						<text class="zl-font-26 zl-color-EB5E00">(因文件过大，该页面不显示效果，成片会使用对应字体)</text>
					</view>
					<view class="font-box zl-flex">
						<view class="font-item zl-flex zl-row-center zl-color-white" @click="editobj.fontId=0"
							:class="editobj.fontId===0?'actstyle':''"> 随机 </view>
						<view class="font-item zl-flex zl-row-center" @click="editobj.fontId=item.fontId"
							:class="item.fontId===editobj.fontId?'actstyle':''" v-for="item in fontList"
							:key="item.fontId">
							<image :src="item.coverUrl" mode=""></image>
						</view>
					</view>
					<view class="surebtn zl-m-t-80" @click="sureSizepop()"> 确定 </view>
				</view>
			</view>
		</uni-popup>
		<!-- 位置弹框 -->
		<uni-popup background-color="#242424" ref="locationpop" type="bottom" border-radius="20rpx 20rpx 0 0">
			<view class="pop-box">
				<view class="pop-top zl-flex zl-row-between">
					<view class="video_poo_title">标题{{titlecur+1}}位置</view>
					<image @click="$refs.locationpop.close()" style="width: 30rpx;height: 30rpx;"
						src="/static/icon/popclose2.png" mode="widthFix">
					</image>
				</view>
				<view class="pop-content">
					<view class="zl-flex zl-p-l-30 zl-p-r-30">
						<text class="zl-font-30 zl-color-white zl-m-r-40">是否居中</text>
						<switch style="transform:scale(0.7)" color="#5AC259" @change="isAlignCenterChange"
							:checked="editobj.isAlignCenter"></switch>
					</view>
					<view v-show="!editobj.isAlignCenter" class="zl-flex zl-m-t-40 zl-p-l-30 zl-p-r-30">
						<text class="zl-font-30 zl-color-white zl-m-r-40">距离左侧</text>
						<uni-number-box :step="step" @change="leftchange" :value="editobj.x" background="#393A3C"
							color="#fff" />
						<text class="zl-font-30 zl-color-white zl-m-l-10">%</text>
					</view>
					<view class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-40">
						<text class="zl-font-30 zl-color-white zl-m-r-40">距离顶部</text>
						<uni-number-box :step="step" @change="topchange" :value="editobj.y" background="#393A3C"
							color="#fff" />
						<text class="zl-font-30 zl-color-white zl-m-l-10">%</text>
					</view>
					<view class="surebtn zl-m-t-80" @click="surelocation()"> 确定 </view>
				</view>
			</view>
		</uni-popup>
		<!-- 时长弹框 -->
		<uni-popup background-color="#242424" ref="timepop" type="bottom" border-radius="20rpx 20rpx 0 0">
			<view class="pop-box">
				<view class="pop-top zl-flex zl-row-between">
					<view class="video_poo_title">标题{{titlecur+1}}显示时长</view>
					<image @click="$refs.timepop.close()" style="width: 30rpx;height: 30rpx;"
						src="/static/icon/popclose2.png" mode="widthFix">
					</image>
				</view>
				<view class="pop-content">
					<view class="zl-flex zl-p-l-30 zl-p-r-30">
						<text class="zl-font-30 zl-color-white zl-m-r-40">标题时长</text>
						<view class="zl-flex">
							<view @click="editobj.isTiming=false" class="timechoose zl-m-r-30"
								:class="editobj.isTiming?'':'acttime'"> 一直显示 </view>
							<view @click="editobj.isTiming=true" class="timechoose"
								:class="editobj.isTiming?'acttime':''"> 自定义 </view>
						</view>
					</view>
					<view v-show="editobj.isTiming" class="zl-flex zl-m-t-40 zl-p-l-30 zl-p-r-30">
						<text class="zl-font-30 zl-color-white zl-m-r-40">时长（秒）</text>
						<uni-number-box :step="step" @change="timechange" :value="editobj.time" background="#393A3C"
							color="#fff" />
					</view>
					<view class="surebtn zl-m-t-80" @click="suretime()"> 确定 </view>
				</view>
			</view>
		</uni-popup>
		<!-- 样式弹框 -->
		<uni-popup background-color="#242424" ref="stylepop" type="bottom" border-radius="20rpx 20rpx 0 0">
			<view class="pop-box">
				<view class="pop-top zl-flex zl-row-between">
					<view class="video_poo_title">标题{{titlecur+1}}样式</view>
					<image @click="$refs.stylepop.close()" style="width: 30rpx;height: 30rpx;"
						src="/static/icon/popclose2.png" mode="widthFix">
					</image>
				</view>
				<view class="pop-content">
					<view class="" style="overflow-x: scroll;">
						<view class="stylechoose-box zl-flex">
							<image @click="changeStyle(item,index)" :class="index===stylecur?'actstyle':''"
								v-for="(item,index) in styleList" :key="index" class="zl-m-r-20 styleImg"
								style="width: 72rpx;height: 72rpx;display: inline-block;" :src="item.icon" mode="">
							</image>
						</view>
					</view>
					<view class="zl-flex" style="padding: 26rpx 30rpx;">
						<view @click="optcur=0" class="style-opt" :class="optcur==0?'style-act':''"> 颜色 </view>
						<view @click="optcur=1" class="style-opt" :class="optcur==1?'style-act':''"> 描边 </view>
						<view @click="optcur=2" class="style-opt" :class="optcur==2?'style-act':''"> 背景 </view>
					</view>
					<view class="" style="overflow-x: scroll;">
						<view class="color-box">
							<image @click="editobj.outlineColor='';editobj.outline=0" v-show="optcur===1"
								:class="editobj.outlineColor==''?'chooseNo':'noLine'" class="no_round"
								src="/static/textstyle/no.png" mode=""></image>
							<image @click="editobj.bordColor='';editobj.bord=0;editobj.radius=0" v-show="optcur===2"
								:class="editobj.bordColor==''?'chooseNo':'noLine'" class="no_round"
								src="/static/textstyle/no.png" mode=""></image>
							<view @click="changeColor(item)" :style="{'background':item}" class="color-item"
								v-for="(item,index) in colorList" :key="index">
								<view
									v-if="(optcur===0&&editobj.color==item)||(optcur===1&&editobj.outlineColor==item)||optcur===2&&editobj.bordColor==item"
									:style="{'border':item==='#FFFFFF'?'4rpx solid #000':'4rpx solid #fff'}"
									class="mini-box">
								</view>
							</view>
						</view>
					</view>
					<view class="zl-flex">
						<view v-show="optcur===1" class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-36">
							<text class="zl-font-30 zl-color-white zl-m-r-40">粗细</text>
							<uni-number-box :step="1" :disabled="!editobj.outlineColor" @change="Strokechange"
								:value="editobj.outline" background="#393A3C" color="#fff" />
						</view>
						<view v-show="optcur===2" class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-36">
							<text class="zl-font-30 zl-color-white zl-m-r-40">内距</text>
							<uni-number-box :step="step" :disabled="!editobj.bordColor" @change="bordchange"
								:value="editobj.bord" background="#393A3C" color="#fff" />
						</view>
						<view v-show="optcur===2" class="zl-flex zl-p-l-30 zl-p-r-30 zl-m-t-36">
							<text class="zl-font-30 zl-color-white zl-m-r-40">圆角</text>
							<uni-number-box :step="step" :disabled="!editobj.bordColor" @change="radiuschange"
								:value="editobj.radius" background="#393A3C" color="#fff" />
						</view>
					</view>
					<view class="surebtn zl-m-t-80" @click="surestyle()"> 确定 </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				step: 2,
				titlecur: 0,
				titleList: [{
					fontSize: 46,
					color: '#000000',
					outlineColor: '',
					outline: 0,
					bord: 16,
					radius: 16,
					bordColor: '#FFDE00',
					isAlignCenter: true,
					x: 2,
					y: 8,
					fontId: 0,
					title: '这是标题',
					isTiming: false,
					time: 2
				}],
				optcur: 0,
				editobj: {},
				styleList: [{
					icon: require('@/static/textstyle/no.png'),
					color: '#FFFFFF',
					outlineColor: '',
					outline: 0,
					bord: 0,
					radius: 0,
					bordColor: '#FFDE00',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/1.png'),
					color: '#000000',
					outlineColor: '',
					outline: 0,
					bord: 16,
					radius: 16,
					bordColor: '#FFDE00',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/2.png'),
					color: '#000000',
					outlineColor: '',
					outline: 0,
					bord: 16,
					radius: 16,
					bordColor: '#FFFFFF',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/3.png'),
					color: '#FFFFFF',
					outlineColor: '',
					outline: 0,
					bord: 16,
					radius: 16,
					bordColor: '#FF2321',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/4.png'),
					color: '#FFFFFF',
					outlineColor: '',
					outline: 0,
					bord: 16,
					radius: 16,
					bordColor: '#7D72F9',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/5.png'),
					color: '#FFFFFF',
					outlineColor: '#000000',
					outline: 4,
					bord: 0,
					radius: 0,
					bordColor: '',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/6.png'),
					color: '#000000',
					outlineColor: '#FFFFFF',
					outline: 4,
					bord: 0,
					radius: 0,
					bordColor: '',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/7.png'),
					color: '#FFFFFF',
					outlineColor: '#FF2321',
					outline: 4,
					bord: 0,
					radius: 0,
					bordColor: '',
					fontId: 0,
					title: '请编辑您的标题',
				}, {
					icon: require('@/static/textstyle/8.png'),
					color: '#FFDE00',
					outlineColor: '#000000',
					outline: 4,
					bord: 0,
					radius: 0,
					bordColor: '',
					fontId: 0,
					title: '请编辑您的标题',
				}],
				colorList: ['#FFFFFF', '#000000', '#FFDE00', '#FF2321', '#FDC07D', '#7D72F9'],
				stylecur: 1,
				optcur: 0,
				coverUrl: 'https://oop-zl-ice.oss-cn-hangzhou.aliyuncs.com/app_static/zh/oth_tit.png',
				fontList: []
			};
		},
		onLoad(opt) {
			console.log(getApp().globalData.temp_titles);
			if (getApp().globalData.temp_titles.length > 0) {
				this.titleList = getApp().globalData.temp_titles;
			}
			if (this.titleList.length > 0) {
				this.editobj = this.titleList[0]
			}
			if (getApp().globalData.temp_coverUrl) {
				this.coverUrl = getApp().globalData.temp_coverUrl;
			}
			this.getFont()
		},
		onUnload() {
			getApp().globalData.temp_titles = []
		},
		methods: {
			getFont() {
				this.api.mate.getfontlist().then(res => {
					if (res.code === 0) {
						this.fontList = res.data
					} else {
						this.$util.msg(res.msg);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
				})
			},
			generateStyleObject(item) {
				return {
					'text-shadow': this.generateTextShadow(item),
					color: item.color,
					'font-size': item.fontSize + 'rpx',
					padding: item.bord + 'rpx',
					background: item.bord > 0 ? item.bordColor : '',
					top: (item.y*13.33 - item.bord) + 'rpx',
					left: item.isAlignCenter ? '50%' : item.x + '%',
					transform: item.isAlignCenter ? 'translateX(-50%)' : 'translateX(0)',
					'border-radius': item.bord > 0 ? (item.radius + 'rpx') : '0rpx'
				}
			},
			generateTextShadow(item) {
				const shadow = item.outline;
				const color = item.outlineColor;
				return item.outline === 0 ? '0' :
					`${shadow}rpx 0 ${color}, -${shadow}rpx 0 ${color}, 0 ${shadow}rpx ${color}, 0 -${shadow}rpx ${color}, ${shadow}rpx ${shadow}rpx ${color}, -${shadow}rpx -${shadow}rpx ${color}, ${shadow}rpx -${shadow}rpx ${color}, -${shadow}rpx ${shadow}rpx ${color}`;
			},
			changeTitle(item, index) {
				this.editobj = this.titleList[index]
				this.titlecur = index
				console.log(this.editobj);
			},
			deltitle(item, index) {
				uni.showModal({
					title: '温馨提示',
					content: '您确定要删除该标题吗？',
					success: (res) => {
						if (res.confirm) {
							this.titleList.splice(index, 1)
							this.titlecur = 0
						}
					}
				})
			},
			addtitle() {
				if (this.titleList.length < 5) {
					this.titleList.push({
						fontSize: 46,
						color: '#000000',
						outlineColor: '#FFFFFF',
						outline: 0,
						bord: 16,
						radius: 16,
						bordColor: '#FFDE00',
						isAlignCenter: true,
						x: 0,
						y: (this.titleList.length + 1) * 8,
						fontId: 0,
						title: '请编辑您的标题',
						isTiming: false,
						time: 2,
					})
					this.titlecur++;
					this.editobj = this.titleList[this.titlecur]
				} else {
					this.$util.msg('已到达上限！')
				}
			},
			edit() {
				console.log(this.titlecur);
				this.$refs.editpop.open()
			},
			size() {
				this.$refs.Sizepop.open()
			},
			location() {
				this.$refs.locationpop.open()
			},
			time() {
				this.$refs.timepop.open()
			},
			style() {
				this.$refs.stylepop.open()
			},
			sureEdit() {
				console.log(this.titleList);
				if (!this.editobj.title) {
					return this.$util.msg('请输入标题！')
				}
				this.setconfig()
				this.$refs.editpop.close()
			},
			setconfig() {
				this.titleList[this.titlecur] = this.editobj;
			},
			// 标题大小
			sizechange(value) {
				this.editobj.fontSize = value;
			},
			//标题y轴位置
			topchange(value) {
				this.editobj.y = value
			},
			//标题x轴位置
			leftchange(value) {
				this.editobj.x = value
			},
			isAlignCenterChange(e) {
				this.editobj.isAlignCenter = e.detail.value;
				this.editobj.x = 0
			},
			//标题时长
			timechange(value) {
				this.editobj.time = value
			},
			//描边粗细
			Strokechange(value) {
				this.editobj.outline = value
			},
			//文字内距
			bordchange(value) {
				this.editobj.bord = value
			},
			//圆角设置
			radiuschange(value) {
				this.editobj.radius = value
			},
			getColor() {},
			//修改颜色
			changeColor(item) {
				if (this.optcur === 0) { //文字颜色
					this.editobj.color = item
				} else if (this.optcur === 1) { //描边颜色
					this.editobj.outlineColor = item;
					this.editobj.outline = 4
				} else { //背景颜色
					this.editobj.bordColor = item;
					this.editobj.bord = 16
				}
			},
			//背景高度
			heightchange(value) {},
			sureSizepop() {
				this.setconfig()
				this.$refs.Sizepop.close()
			},
			changeStyle(item, index) {
				this.stylecur = index;
				this.editobj.color = item.color;
				this.editobj.outlineColor = item.outlineColor;
				this.editobj.outline = item.outline;
				this.editobj.bord = item.bord;
				this.editobj.radius = item.radius;
				this.editobj.bordColor = item.bordColor;
			},
			surelocation() {
				this.setconfig()
				this.$refs.locationpop.close()
			},
			suretime() {
				this.setconfig()
				this.$refs.timepop.close()
			},
			surestyle() {
				this.setconfig()
				this.$refs.stylepop.close()
			},
			submit() {
				uni.$emit('titleStyle', this.titleList)
				console.log(this.titleList);
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss" scoped>
	::-webkit-scrollbar {
		height: 0;
	}

	.bg-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;

		.bg-img {
			width: 100%;
			height: 1333rpx;
		}

		.title-box {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 99;
			font-weight: 600;
			// max-width: 600rpx;
			white-space: nowrap;
			letter-spacing: 4rpx;
			
		}

		.strok {
			text-shadow: 4rpx 0 pink,
				-4rpx 0 pink,
				0 4rpx pink,
				0 -4rpx pink,
				4rpx 4rpx pink,
				-4rpx -4rpx pink,
				4rpx -4rpx pink,
				-4rpx 4rpx pink;
		}
	}

	.all-box {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 9;
		width: 750rpx;
		background-color: #242424;

		.all-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 26rpx;
			border-bottom: 2rpx solid rgba(225, 225, 225, 0.2);

			.left-scroll {
				width: 540rpx;
				overflow-x: scroll;
				overflow-y: hidden;
				white-space: nowrap;
				height: 90rpx;

				.left-item {
					position: relative;
					display: inline-block;
					width: 90rpx !important;
					height: 90rpx;
					// overflow: hidden;
					margin-right: 60rpx;
					border-bottom: 5rpx solid #242424;
					text-align: center;
					line-height: 90rpx;
					color: #fff;
					opacity: 0.6;

					.delicon {
						position: absolute;
						right: -40rpx;
						top: 30rpx;
						// margin-left: 10rpx;
						width: 30rpx;
						height: 30rpx;
						z-index: 99;
					}
				}

				.act {
					border-bottom: 5rpx solid #fff;
					opacity: 1;
				}
			}

			.add-box {
				width: calc(100% - 540rpx);
				background-color: #242424;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #FFFFFF;
				opacity: 0.6;
			}
		}

		.opt-box {
			padding: 42rpx 24rpx 42rpx 40rpx;

			.save-btn {
				width: 150rpx;
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}

	.pop-box {
		width: 750rpx;
		background-color: #262626;
		border-radius: 20rpx 20rpx 0 0;

		.pop-top {
			height: 120rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid rgba(225, 225, 225, 0.2);
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #fff;
		}

		.pop-content {
			padding: 32rpx 0 40rpx;

			.textarea2 {
				width: 690rpx;
				height: 230rpx;
				background: #393A3C;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin: 0 auto;
				color: #fff;
			}

			.surebtn {
				width: 690rpx;
				height: 110rpx;
				background: #393A3C;
				box-shadow: 0rpx 20rpx 20rpx 0rpx rgba(26, 26, 26, 0.15);
				border-radius: 10rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 110rpx;
				margin: 38rpx auto 0;
			}
		}

		.timechoose {
			width: 164rpx;
			height: 60rpx;
			background: #393A3C;
			box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(26, 26, 26, 0.15);
			border-radius: 8rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 64rpx;
		}

		.acttime {
			background-color: #EB5E00 !important;
		}

		.stylechoose-box {
			width: 1000rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx 32rpx 30rpx;
			border-bottom: 1px solid rgba(225, 225, 225, 0.2);
			color: #fff;
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
		}

		.styleImg {
			border: 4rpx solid transparent;
			box-sizing: border-box;
		}

		.actstyle {
			border: 4rpx solid #fff !important;
			border-radius: 12rpx;
		}

		.style-opt {
			width: 120rpx;
			height: 60rpx;
			border-radius: 30rpx;
			border: 2rpx solid #FFFFFF;
			opacity: 0.5;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 60rpx;
			margin-right: 30rpx;
		}

		.style-act {
			opacity: 1;
		}

		.color-box {
			width: 1000rpx;
			display: flex;
			flex-wrap: nowrap;
			margin-top: 8rpx;
			padding: 0 30rpx;
			overflow-x: scroll;
			white-space: nowrap;

			.no_round {
				width: 80rpx;
				height: 80rpx;
				margin-right: 30rpx;
				border-radius: 40rpx;
			}

			.chooseNo {
				width: 72rpx !important;
				height: 72rpx !important;
				border: 4rpx solid #fff;
			}

			.noLine {
				border: 0
			}

			.color-item {
				// display: inline-block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				margin-right: 30rpx;

				.mini-box {
					display: inline-block;
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
					margin-top: 10rpx;
					margin-left: 10rpx;
				}
			}
		}

		.font-box {
			padding: 0 30rpx;
			margin-top: 40rpx;
			flex-wrap: wrap;
			gap: 22rpx;

			.font-item {
				width: 156rpx;
				height: 80rpx;
				background: #393A3C;
				border-radius: 20rpx;
				border: 2rpx solid #979797;

				image {
					height: 42rpx;
					width: 120rpx;
				}
			}
		}
	}
</style>